<template>
  <!-- 项目实施 - 右上角tab2 - 智能校验 - content -->
  <div class="right-tab-con2">
    <div class="top">
      <span>校验结果</span>
      <el-button type="text" style="font-size: 12px;" icon="el-icon-refresh-right"> 刷新 </el-button>
    </div>
    <div class="btns">
      <el-button v-for="(i, idxI) in btnsInfo" :key="idxI" :class="idxI == actIdx ? 'actBtn' : ''" size="mini" plain @click="changIdx(idxI)"> {{i.l}}(<span :class="'state'+i.state">{{i.list && i.list.length ? i.list.length : '0'}}</span>) </el-button>
    </div>
    <div v-if="btnsInfo[actIdx].list && btnsInfo[actIdx].list.length>0" class="list">
      <div v-for="(i, idxI) in btnsInfo[actIdx].list" :key="idxI" class="list-item">
        <div class="item-l">
          <span class="line"></span>
          <span class="text">{{i.l}}</span>
        </div>
        <div :class="'item-r state'+i.state">
          <img :src="stateImg[i.state-1]" width="14" height="15">
          <span>{{i.v}}</span>
        </div>
      </div>
    </div>
    <div v-else class="list empty">
      <img :src="require('../../images/empty-img.png')" width="80px" height="100px"/>
      <p class="right-tab-con3-text">无数据</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "rightTabCon2",
  components: {},
  data() {
    return {
      list: [],
      // list: [ // state: 1.不通过 2.警示 3.通过
      //   {l: '项目名称字段为空', state: 1, v: '不通过'},
      //   {l: '您填写的信息有误，请查看错误提示后修改。', state: 2, v: '警示'},
      //   {l: '报告日期字段不为空', state: 3, v: '通过'}
      // ],
      actIdx: 0,
      btnsInfo: [
        {state: 0, l: '全部', list: []},
        {state: 1, l: '不通过', list: []},
        {state: 2, l: '警示', list: []},
        {state: 3, l: '通过', list: []},
      ],
      stateImg: [
        require('../../images/icon-status-1.png'),
        require('../../images/icon-status-2.png'),
        require('../../images/icon-status-3.png'),
      ]
    }
  },
  props: {
    tabTitle: {
      type: String,
      default: () => ''
    },
    info: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    info: {
      handler(n, o) {
        if(n && n.length>0) {
          this.list = n;
        }
      },
      deep: true
    }
  },
  mounted() {
    setTimeout(() => {
      if(this.info && this.info.length>0) {
        this.list = this.info;
      }
      let list = this.list;
      if(list && list.length>0) {
        this.btnsInfo.map((i, idxI) => {
          if(idxI == 0) {
            i.list = list;
          } else if(list.filter(j => j.state == i.state).length>0) {
            i.list = list.filter(j => j.state == i.state);
          }
        })
      }
    }, 200)
  },
  methods: {
    /**
     * @author Wrl
     * 点击按钮
     */
    changIdx(e) {
      this.actIdx = e;
    }
  }
}
</script>

<style lang="scss" scoped>
  .right-tab-con2 {
    padding: 5px 10px;
    height: 100%;
    .top {
      width: 100%;
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
      span {
        font-weight: bold;
      }
    }
    .btns {
      display: inline-flex;
      justify-content: space-between;
      width: 100%;
      align-items: center;
      margin: 5px 0 10px;
      ::v-deep {
        .el-button--mini {
          padding: 5px 10px;
          font-size: 12px;
          border-radius: 3px;
          margin-left: 0;
          &:not(:last-child) {
            margin-right: 5px;
          }
          &.actBtn,
          &:active {
            color: #FFFFFF;
            background: #11A389;
            border: 0.5px solid #11A389;
            span {
              color: #FFFFFF;
            }
          }
        }
      }
    }
    .list {
      width: 100%;
      padding: 10px 0;
      border-top: 1px solid #d4d4d4;
      height: calc(100% - 70px);
      overflow: overlay;
      position: relative;
      &.empty {
        text-align: center;
        padding: 40% 0;
      }
      &-item {
        width: 100%;
        display: inline-flex;
        justify-content: space-between;
        align-items: flex-start;
        min-height: 32px;
        padding: 7px 5px 7px 7px;
        margin-bottom: 10px;
        display: flex;
        font-size: 12px;
        background: #ffffff;
        border: 1px solid #e4e7ed;
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.05);
        border-radius: 3px;
        .item-l {
          display: inline-flex;
          justify-content: flex-start;
          align-items: flex-start;
          width: calc(100% - 5.5em);
          .line {
            display: inline-block;
            width: 2px;
            height: 9px;
            background: #11A389;
            margin: 4px 8px 4px 0;
            box-shadow: 0px 0px 1px #11a983;
          }
          .text {
            line-height: 1.5;
            width: calc(100% - 14px);
          }
        }
        
        .item-r {
          width: 5em;
          display: inline-flex;
          justify-content: flex-start;
          align-items: flex-end;
          img {
            margin-right: 3px;
          }
          span {
            text-align: left;
          }
        }
      }
    }
    .state1 {
      color: #f56c6c;
    }
    .state2 {
      color: #e8a849;
    }
    .state3 {
      color: #67c13a;
    }
    // .right-tab-con-img {
    //   width: 100%;
    // }
  }
</style>